<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- 参考资料： https://plotly.com/javascript/line-charts/ -->
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
    <title>历史曲线</title>
</head>

<body>
    <div id='myDiv'>
        <!-- Plotly chart will be drawn inside this DIV -->
    </div>
</body>

</html>
<script>
    var trace1 = {
        x: [1, 2, 3, 4],
        y: [10, 15, 13, 17],
        type: 'scatter' //通过type属性声明为折线图
    };

    var data = [trace1];

    //图形和轴标题
    var layout = {
        title: '点位' + getParamValue("id") + '历史曲线',
        xaxis: {
            title: '时间'
        },
        yaxis: {
            title: '浓度'
        }
    };

    Plotly.newPlot('myDiv', data, layout);



    //获取URL参数
    function getParamValue(name) {
        var url = window.location.href;//url地址
        var params = window.location.search;//url后拼接参数
        var value = "";//根据参数名返回参数值
        //防止参数名部分相同e.g. id,product_id,参数命名推荐使用驼峰规则
        //statrtWith
        var startIndex = params.indexOf('?' + name + '=')
        //middle
        var midIndex = params.indexOf('&' + name + '=')
        if (startIndex == 0) {//?name=value
            var nextAnd = params.indexOf("&", startIndex);
            if (nextAnd == -1) {
                nextAnd = params.length;
            }
            value = params.substring(startIndex + (1 + name.length + 1), nextAnd);//1(?) + name.length + 1(=)
        } else {//&name=value
            var nextAnd = params.indexOf("&", midIndex + 1);//此处加1是过滤掉自身的&
            nextAnd = nextAnd == -1 ? params.length : nextAnd;//三元运算符
            value = params.substring(midIndex + (1 + name.length + 1), nextAnd);
        }
        return value;
    }
</script>